<template>
    <div class="k-layout-content">
        <el-form :model="filterParmas" :inline="true" label-suffix=":" style="background-color: #fff;">
            <el-form-item label="关键字">
                <el-input v-model="filterParmas.keyword" placeholder="请输入任务名称关键字" style="width:180px;"
                    clearable></el-input>
            </el-form-item>
            <el-form-item label="任务类型">
                <el-select v-model="filterParmas.jobType" placeholder="请选择任务类型" style="width: 180px;" clearable>
                    <el-option label="Bean" value="beanName"></el-option>
                    <el-option label="类名称" value="className"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="触发方式">
                <el-select v-model="filterParmas.expressionType" placeholder="请选择任务触发方式" style="width: 180px;"
                    clearable>
                    <el-option label="cron表达式" value="cron"></el-option>
                    <el-option label="固定间隔(秒)" value="simple"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="状态">
                <el-select v-model="filterParmas.disabled" placeholder="请选择任务状态" style="width: 180px;" clearable>
                    <el-option label="启用" value="0"></el-option>
                    <el-option label="未启用" value="1"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" :icon="Search" @click="query">查询</el-button>
                <el-button type="" :icon="Refresh" @click="resetQuery">重置</el-button>
                <el-button type="primary" :icon="Plus" @click="handleCreate">添加任务</el-button>
            </el-form-item>
        </el-form>
        <div style="max-height:calc(100% - 40px)">
            <el-table :data="tableData" :border="true" height="100%">
                <el-table-column label="任务名称" prop="name" width="200" show-overflow-tooltip></el-table-column>
                <el-table-column label="任务类型" prop="jobType" width="90">
                    <template #default="{ row }">
                        <el-tag v-if="row.jobType === 'beanName'" type="success">Bean</el-tag>
                        <el-tag v-else type="warning">类名称</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="执行类名/Bean名" prop="className" min-width="400"
                    show-overflow-tooltip></el-table-column>
                <el-table-column label="触发方式" prop="expressionType" width="120">
                    <template #default="{ row }">
                        <el-tag v-if="row.expressionType === 'cron'" type="success">cron表达式</el-tag>
                        <el-tag v-else type="warning">固定间隔(秒)</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="触发配置" prop="expression" width="150"></el-table-column>
                <!-- <el-table-column label="上次执行" prop="beforeExecuteTime"></el-table-column>
                <el-table-column label="下次执行" prop="nextExecuteTime"></el-table-column> -->
                <el-table-column label="任务描述" prop="description" min-width="200"
                    show-overflow-tooltip></el-table-column>

                <el-table-column label="状态" prop="disabled" width="90">
                    <template #default="{ row }">
                        <el-tag v-if="row.disabled === '0'" type="success">启用</el-tag>
                        <el-tag v-else type="danger">未启用</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" prop="name" fixed="right" width="140">
                    <template #default="{ row }">
                        <el-button type="primary" link size="small" @click="handleEdit(row)">编辑</el-button>
                        <el-button v-if="row.disabled === '1'" type="primary" link size="small"
                            @click="handleStart(row)">启动</el-button>
                        <el-button v-if="row.disabled === '0'" type="primary" link size="small"
                            @click="handleStop(row)">停止</el-button>
                        <!-- <el-button type="danger" size="small" @click="scope.row">记录</el-button> -->
                        <el-button type="danger" link danger size="small" @click="handleDelete(row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog v-model="dialogFormModal.visible" title="添加任务" width="600">
            <el-form :model="dialogFormModal.form" :label-width="dialogFormModal.formLabelWidth" label-suffix=":">
                <el-form-item label="任务名称">
                    <el-input v-model="dialogFormModal.form.name" autocomplete="off" />
                </el-form-item>
                <el-form-item label="任务描述">
                    <el-input v-model="dialogFormModal.form.description" autocomplete="off" />
                </el-form-item>
                <el-form-item label="任务类型">
                    <el-select v-model="dialogFormModal.form.jobType" placeholder="Please select a zone">
                        <el-option label="Bean" value="beanName" />
                        <el-option label="类名称" value="className" />
                    </el-select>
                </el-form-item>
                <el-form-item :label="dialogFormModal.form.jobType === 'beanName' ? '任务Bean名称' : '任务类名'">
                    <el-input v-model="dialogFormModal.form.className" autocomplete="off" />
                </el-form-item>
                <el-form-item label="触发类型">
                    <el-select v-model="dialogFormModal.form.expressionType" placeholder="Please select a zone">
                        <el-option label="cron表达式" value="cron" />
                        <el-option label="固定间隔(秒)" value="simple" />
                    </el-select>
                </el-form-item>
                <el-form-item label="触发配置">
                    <el-input v-model="dialogFormModal.form.expression" autocomplete="off" />
                </el-form-item>
                <el-form-item label="任务参数">
                    <el-input type="textarea" v-model="dialogFormModal.form.paramDataMap" autocomplete="off"
                        placeholder="使用JSON格式" />
                </el-form-item>
                <el-form-item label="状态">
                    <el-radio-group v-model="dialogFormModal.form.disabled">
                        <el-radio-button label="启用" value="0"></el-radio-button>
                        <el-radio-button label="未启用" value="1"></el-radio-button>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogFormModal.visible = false">取消</el-button>
                    <el-button type="primary" @click="handleSave">
                        确认
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { Plus, Refresh, Search } from '@element-plus/icons-vue';
import { cloneDeep } from "lodash";
import http from '@/api/http';
import { ElNotification } from 'element-plus'
const tableData = ref([]);
const filterParmas = ref({
    keyword: '',
    jobType: '',
    expressionType: '',
    disabled: ''
});
const query = () => {
    console.log(filterParmas.value);
    http.get('/job/list', { params: filterParmas.value }).then((resp) => {
        tableData.value = resp.data;
    })
}
const resetQuery = () => {
    filterParmas.value = {
        keyword: '',
        jobType: '',
        expressionType: '',
        disabled: ''
    }
    query();
}

const dialogFormModal = ref({
    visible: false,
    formLabelWidth: '100',
    isEdit: false,
    form: {
        name: '',
        description: '',
        jobType: '',
        className: '',
        expressionType: '',
        expression: '',
        paramDataMap: '',
        disabled: '0'
    }
});

const handleCreate = () => {
    dialogFormModal.value.visible = true;
    dialogFormModal.value.isEdit = false;
    dialogFormModal.value.form = {
        name: '',
        description: '',
        jobType: '',
        className: '',
        expressionType: '',
        expression: '',
        paramDataMap: '',
        disabled: '0'
    }
}


const handleEdit = (row) => {
    dialogFormModal.value.visible = true;
    dialogFormModal.value.isEdit = true;
    dialogFormModal.value.form = cloneDeep(row)
}

const handleSave = () => {
    console.log(dialogFormModal.value.form);
    if (dialogFormModal.value.isEdit) {
        http.put('/job', dialogFormModal.value.form).then((resp) => {
            dialogFormModal.value.visible = false;
            query();
            ElNotification({
                title: '提示',
                message: '保存成功！',
                type: 'success',
                duration: 2000
            })
        })
    } else {
        http.post('/job', dialogFormModal.value.form).then((resp) => {
            dialogFormModal.value.visible = false;
            query();
            ElNotification({
                title: '提示',
                message: '保存成功！',
                type: 'success',
                duration: 2000
            })
        })
    }
}

const handleStart = (row) => {
    console.log(row);
    http.put(`/job/${row.id}/resume`).then((resp) => {
        query();
        ElNotification({
            title: '提示',
            message: '任务已启动',
            type: 'success',
            duration: 2000
        })
    })
}
const handleStop = (row) => {
    console.log(row);
    http.put(`/job/${row.id}/pause`).then((resp) => {
        query();
        ElNotification({
            title: '提示',
            message: '任务已暂停',
            type: 'success',
            duration: 2000
        })
    })
}
const handleDelete = (row) => {
    console.log(row);
    http.delete(`/job/${row.id}`).then((resp) => {
        query();
        ElNotification({
            title: '提示',
            message: '任务已删除',
            type: 'success',
            duration: 2000
        })
    })
}

onMounted(() => {
    query();
})
</script>

<style lang="scss" scoped>
.el-form-item {}
</style>